<script lang="ts">
import { defineComponent, ref, inject, onMounted, onUnmounted, watch } from 'vue'
import { Pagination, Navigation, Autoplay, A11y } from "swiper";
import router from "@/router";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

export default defineComponent({
    name: "swiper-example-loop",
    title: "Loop mode / Infinite loop",
    url: import.meta.url,
    components: {
        Swiper,
        SwiperSlide
    },
    props: {
        list: {
            type: Object
        },
        isShowBtn: {
            type: Number,
        }
    },
    setup(props) {
        const bannerList = ref() as any
        const bannerShow = ref("false");
        let bannerLength = ref(0)
        let isShowBtn = ref(1) /* 1显示按钮 */
        let activeWidth = ref(0)
        let timed = ref() as any

        props.list?.forEach((item: any, index: any) => {
            if (index == 0) {
                item.active = true
            } else {
                item.active = false
            }
        })
        isShowBtn.value = Number(props.isShowBtn)
        watch(() => props.list, (newValue) => {
            bannerList.value = newValue
            bannerLength.value = 24 / (bannerList.value.length)
            isShowBtn.value = Number(props.isShowBtn)
        }, { immediate: true })
        const onSlideChange = (slideChange: any) => {
            if (
                bannerList.value[slideChange.activeIndex - 1] != undefined &&
                (bannerList.value[slideChange.activeIndex - 1].mobile_video_url !=
                    null ||
                    bannerList.value[slideChange.activeIndex - 1].video_url != null)
            ) {
                slideChange.autoplay.stop();
                setTimeout(() => {
                    slideChange.autoplay.start();
                }, 3000);
            }
        };
        const onPlayVideo = () => {
            bannerShow.value = "none";
        };
        const handleSlideNext = (val: any) => {
            activeWidth.value = 0
            bannerList.value.forEach((item: any, index: any) => {
                if (index == val.realIndex) {
                    item.active = true
                } else {
                    item.active = false
                }
            })
        }
        const co = () => {
            if (activeWidth.value == 100) {
                return
            } else {
                activeWidth.value += 2
            }
        }

        const myFn = inject<any>("open")
        const goOpenContactPopup = () => {
            // myFn()
            router.push(`/about`);
        }

        onMounted(() => {
            timed.value = setInterval(co, 100)
        })
        onUnmounted(() => {
            clearInterval(timed.value)
        })
        return {
            bannerList,
            bannerLength,
            activeWidth,
            isShowBtn,
            onSlideChange,
            onPlayVideo,
            handleSlideNext,
            goOpenContactPopup,
            modules: [Navigation, Autoplay, A11y],
        }
    },

})

</script>


<template>
    <!-- <div class="content"> -->
    <!-- :pagination="{ clickable: true }" -->
    <swiper class="swiper" :modules="modules" :slides-per-view="1" :space-between="30" :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }" :loop="isShowBtn === 1 ? true : false" :autoplay="{
    delay: 5000,
    stopOnLastSlide: false,
    disableOnInteraction: false,
}" :pagination="{ clickable: true }" @slideChange="onSlideChange" @slideChangeTransitionStart="handleSlideNext">
        <swiper-slide class="slide" v-for="item in bannerList" :key="item.id">
            <el-row class="row">
                <el-col class="image_el" :span="24" :xs="0">
                    <el-image fit="cover" :src="item.url" alt="" v-if="!item.video_url"></el-image>
                    <video autoplay muted loop :src="item.video_url" v-if="item.video_url" :poster="item.url"
                        @play="onPlayVideo" class="videoBanner"></video>
                </el-col>
                <el-col class="image_el" :span="0" :xs="24">
                    <el-image :src="item.mobile_url" alt="" v-if="item.mobile_url" style="object-fit: cover"></el-image>
                    <video controls :src="item.mobile_video_url" v-if="item.mobile_video_url" :poster="item.url"
                        @play="onPlayVideo" class="videoBanner"></video>
                </el-col>
            </el-row>
            <div class="bannerContent">
                <div class="content bannerContentPart">
                    <el-row v-if="item.position == 'left'">
                        <el-col :span="10" :xs="24">
                            <div class="bigTitle" :style="{ 'color': item.background_color }">{{ item.title }}
                            </div>
                            <div class="secondTitle remarks" :style="{ 'color': item.background_color }" v-html="item.desc">
                            </div>
                            <el-button color="#064DD6" size="large" round v-if="item.title && isShowBtn === 1"
                                @click="goOpenContactPopup">了解详情 ></el-button>
                        </el-col>
                        <el-col :span="12" :xs="0"></el-col>
                    </el-row>

                    <el-row v-if="item.position == 'center'">
                        <el-col :span="5" :xs="0"></el-col>
                        <el-col style="text-align: center" :span="14" :xs="24">
                            <div class="bigTitle" :style="{ 'color': item.background_color }">{{ item.title }}
                            </div>
                            <div class="secondTitle remarks contentText" :style="{ 'color': item.background_color }"
                                v-html="item.desc"></div>
                            <el-button color="#064DD6" size="large" round v-if="item.title && isShowBtn === 1"
                                @click="goOpenContactPopup">马上咨询</el-button>
                        </el-col>
                        <el-col :span="5" :xs="0"></el-col>
                    </el-row>

                    <el-row v-if="item.position == 'right'" class="bannerText">
                        <el-col :span="10" :xs="0"></el-col>
                        <el-col :span="14" :xs="24">
                            <div class="bigTitle" :style="{ 'color': item.background_color }">{{ item.title }}
                            </div>
                            <div class="secondTitle remarks contentText" :style="{ 'color': item.background_color }"
                                v-html="item.desc"></div>
                            <el-button color="#064DD6" size="large" round v-if="item.title && isShowBtn === 1"
                                @click="goOpenContactPopup">马上咨询</el-button>
                        </el-col>
                    </el-row>
                </div>
                <!-- new -->
                <div class="content bannerPagenationBox" v-if="isShowBtn == 1">
                    <div class="bannerPagenation">
                        <el-row :gutter="10" style="width:100%">
                            <el-col :span="bannerLength" v-for="item in bannerList" :key="item.id">
                                <div :class="item.active ? 'active' : 'pagenation'">
                                    <div :class="item.active ? 'activeDiv' : ''" :style="{ 'width': activeWidth + '%' }">
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>

        </swiper-slide>
        <!-- <div class="swiper-button-prev">
            <i class="iconfont icon-xiangyou21-01"></i>
        </div>
        <div class="swiper-button-next">
            <i class="iconfont icon-xiangyou-01"></i>
        </div> -->
        <!-- <div class="content bannerPagenationBox" v-if="isShowBtn == 1">
            <div class="bannerPagenation">
                <el-row :gutter="10" style="width:100%">
                    <el-col :span="bannerLength" v-for="item in bannerList" :key="item.id">
                        <div :class="item.active ? 'active' : 'pagenation'">
                            <div :class="item.active ? 'activeDiv' : ''" :style="{ 'width': activeWidth + '%' }"></div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div> -->

    </swiper>
    <!-- </div> -->
</template>

<style lang="scss" scoped>
.swiper-button-prev,
.swiper-button-next {
    width: 50px;
    height: 50px;

    &::after {
        font-size: 0px;
        background-color: #fff;
        color: #6e6e73;
        padding: 0;
        border-radius: 50px;
    }

    .iconfont {
        color: #fff;
        font-size: 50px;
    }
}

.bannerContent {
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    // display: flex;
    align-items: center;

    .content {
        margin: 0 auto;
    }

    .bannerContentPart {
        height: 100%;
        // width: 100%;
    }

    .bannerText {
        left: 100px;
    }
}

.bannerPagenationBox {
    position: relative;
    bottom: 5%;
    margin: 0 auto;

    .bannerPagenation {
        position: absolute;
        left: 0%;
        z-index: 999;
        width: 280px;
        height: 4px;
        margin: 0 auto;
        display: flex;
        justify-content: center;

        .pagenation {
            background-color: #666;
            height: 100%;
            opacity: 0.4;
            width: 100%;
            border-radius: 100px;
        }

        .active {
            width: 100%;
            height: 100%;
            background-color: $auxiliaryColor3;
            opacity: 1;
            border-radius: 100px;

            .activeDiv {
                width: 0%;
                height: 100%;
                background-color: #000;
            }
        }
    }

}


.remarks {
    margin: 72px 0 60px 0;
}

.btn {
    color: #114b9d;
}

.swiper {
    height: 640px;

    .slide {
        height: 100%;

        .row {
            height: 100%;

            .image_el {
                width: 100%;
                height: 100%;

                .el-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover !important;
                    }
                }

                .videoBanner {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }
}

@media screen and (max-width: 1600px){
    .bannerContent{
        padding: 80px 0;
    }
}

@media screen and (max-width: 1440px){
    .bannerContent{
        padding: 50px 0;
    }
}

@media screen and (max-width: 768px) {

    .swiper-button-prev,
    .swiper-button-next {
        .iconfont {
            color: #fff;
            font-size: 50px;
            display: none;
        }
    }

    .jdt-ctn {
        text-align: center;
        padding: 10% !important;

        .bigTitle {
            margin-bottom: 8px;
        }

        .contentText {
            margin-bottom: 8px;
        }
    }

    .swiper-pagination {
        bottom: 0px !important;
    }

    .bannerContent {
        .bannerContentPart {
            height: 166%;
        }

        .bannerText {
            left: 0;
        }
    }
}

@media screen and (max-width: 450px) {
    .content {
        text-align: center;
    }

    .swiper {
        height: 450px !important;

        :deep(.el-image__inner) {
            object-fit: cover;
        }
    }

    .bannerPagenationBox {
        display: none;
    }
}

/* 进度条分页 */
/* .content{
    padding-top: 0px !important;
}

:deep(.swiper-pagination-bullet) {
    border-radius: 0% !important;
    width: 5vw;
    height: 0.5vh !important;
    background-color: #999 !important;
}

:deep(.swiper-pagination-bullet-active) {
    background-color: #999 !important;
} */

:deep(.swiper-button-next) {
    right: 57px;

    .iconfont {
        color: #172E59;
    }
}

:deep(.swiper-button-prev) {
    left: 57px;

    .iconfont {
        color: #172E59;
    }
}
</style>